<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <!--引入 头部片段-->
    <div  th:replace="admin/common/back_common :: header"></div>

    <!--引入 左侧导航片段-->
    <div  th:replace="admin/common/back_common :: left"></div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <!-- 查询条件开始-->

        <form class="layui-form">
            <blockquote class="layui-elem-quote quoteBox">
                <form class="layui-form" >
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">昵称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="title" id="title" class="layui-input searchVal" placeholder="请输入昵称" />
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="opername" id="opername" class="layui-input searchVal" placeholder="请输入用户名" />
                            </div>
                        </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">状态</label>
                        <div class="layui-input-inline">
                            <select name="quiz1">
                                <option value="">请选择状态</option>
                                <option value="0">未锁定</option>
                                <option value="1">已锁定</option>
                            </select>
                        </div>
                    </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">开始时间</label>
                            <div class="layui-input-inline">
                                <input type="text" name="startTime" id="startTime" class="layui-input searchVal" placeholder="开始时间" />
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">结束时间</label>
                            <div class="layui-input-inline">
                                <input type="text" name="endTime" id="endTime" class="layui-input searchVal" placeholder="结束时间" />
                            </div>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">分类1</label>
                        <div class="layui-input-inline">
                            <select name="quiz1">
                                <option value="">请选择状态</option>
                                <option value="0">分类11</option>
                                <option value="1">分类12</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">分类2</label>
                        <div class="layui-input-inline">
                            <select name="quiz1">
                                <option value="">请选择状态</option>
                                <option value="0">分类21</option>
                                <option value="1">分类22</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block" style="text-align: center;">
                            <button type="button" class="layui-btn" lay-submit="" lay-filter="doSearch"><span class="layui-icon layui-icon-search"></span>查询</button>
                            <button type="reset" class="layui-btn layui-btn-warm"><span class="layui-icon layui-icon-refresh-1"></span>重置</button>
                        </div>
                    </div>
                </form>
            </blockquote>
        </form>
        <!-- 查询条件结束-->

        <!-- 数据表格开始 -->
        <div>
            <table class="layui-hide" id="noticeTable" lay-filter="noticeTable"></table>
            <!-- 工具栏 -->
            <div id="noticeToolBar" style="display: none;">
            </div>

            <div id="noticeRowBar" style="display: none;">
                <button type="button" lay-event="show" class="layui-btn layui-btn-sm"><span class="layui-icon layui-icon-about"></span>查看</button>
            </div>
        </div>
        <!-- 数据表格结束 -->


    </div>


    <!-- 查看弹出层的开始 -->
    <div style="display: none;padding: 5px" id="showNoticeDiv">
        <div id="show_content" style="margin: 10px;padding: 10px;line-height: 25px;">
           <h1> 编号:<span id="show_id">10001</span></h1>
            用户名:<span id="show_userName">312341231</span>
            用户手机号:<span id="show_phone">1234121421</span>
            用户状态:<span id="show_state">锁定</span>
            <div id="classiy">

            </div>
        </div>
    </div>
    <!-- 查看弹出层的结束-->


    <!--引入   底部固定区域 -->
    <div  th:replace="admin/common/back_common :: footer"></div>
</div>

<script type="text/html" id="checkboxTpl">
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" name="lock" value="{{d.id}}" title="锁定" lay-filter="lockDemo" {{ d.score == 14 ? 'checked' : '' }}>
</script>

<script src="/layui/layui.js"></script>
<script type="text/javascript">


        layui.use(['element','jquery','form','table','layer','laydate','layedit'],function () {
            var element = layui.element;
            var $=layui.jquery;
            var form=layui.form;
            var table=layui.table;
            var layer=layui.layer;
            var laydate=layui.laydate;
            var layedit=layui.layedit;

            //日期时间选择器
            laydate.render({
                elem: '#startTime'
                ,type: 'datetime'
            });
            //日期时间选择器
            laydate.render({
                elem: '#endTime'
                ,type: 'datetime'
            });

            var tableIns = table.render({
                elem: '#noticeTable',
                url: 'json/data.json',
                toolbar: '#noticeToolBar',
                page: 'true',
                title: '账单数据表',
                cols: [ [
                    {type:'checkbox'},
                    {field:'id',title:'ID',align:'center'},
                    {field:'username',title:'公告标题',align:'center'},
                    {field:'sex',title:'公告标题',align:'center'},
                    {field:'city',title:'创建时间',align:'center'},
                    {field:'sign',title:'创建时间',align:'center'},
                    {field:'lock', title:'状态', width:110, templet: '#checkboxTpl', unresize: true},
                    {title:'操作',toolbar:'#noticeRowBar',width:250}
                ] ],
                done:function (res,curr,count) {
                    if(curr>1 && res.data.length==0){
                        tableIns.reload({
                            page:{curr:curr-1}
                        });

                    }
                }
            });




            //监听锁定操作
            form.on('checkbox(lockDemo)', function(obj){
                layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
            });


            form.on("submit(doSearch)",function (data) {
                tableIns.reload({
                    url:'/sys/notice/noticeList',
                    where:data.field,
                    page:{
                        curr:1
                    }
                })
                return false;
            })

            table.on('tool(noticeTable)',function (obj) {
                var data = obj.data;
                switch (obj.event) {
                    case "show":
                        showNotice(data);
                        break;
                }
            })

            //弹出层索引
            var mainIndex;

            //查看公告
            function  showNotice(data) {
                mainIndex = layer.open({
                    type:1,
                    content:$("#showNoticeDiv"),
                    area:["800px","500px"],
                    title:"查看用户",
                    success:function () {
                        $("#show_title").html(data.title);
                        $("#show_opername").html(data.opername);
                        //$("#show_createtime").html(data.createtime);
                        $("#show_content").html(data.content);
                        var html="<span >学校</span>:<span >清华大学</span>";
                        $("#classiy").html(html);
                    }
                });
            }

    });

</script>
</body>
</html>